<template>
	<view>
		<!-- 标题 -->
		<shopro-navbar
			:isBack="false"
			:backTextStyle="{
				color: '#272B33',
				fontSize: '36rpx',
				fontWeight: '400',
			}">
			<view slot="content" class="u-flex nav-wrap">
				<view class="nav-item">城市路径</view>
			</view>
		</shopro-navbar>

		<view class="inBox">
			<view class="diTop" @click="mapListClick">
				<view class="flex at f14 c3">
					<image
						src="../../../static/dw.png"
						class="dwP"
						mode="widthFix"></image>
					<view class="foText">
						<!-- 当前选择：<text>北京市第一中学</text> -->
						当前选择：
						<text>{{ city }}</text>
					</view>
				</view>
				<!--				<view class="ml flex at f12">-->
				<!--					<image src="../../../static/qh.png" class="qhP" mode="widthFix"></image>-->
				<!--					<view class="chect"> 切换</view>-->
				<!--				</view>-->
			</view>
			<view class="bgs" v-for="(item, index) in cityList" :key="index">
				<view class="titles" :style="{ backgroundImage: item.image }">
					{{ item.name }}
				</view>
				<view class="flex at">
					<view class="mtOne">
						<view
							class="por"
							v-for="(itemChild, indexchild) in item.child"
							:key="indexchild"
							@click="check(indexchild, index)">
							<image :src="itemChild.image" class="good"></image>
							<view
								:class="[
									item.provicenActive == indexchild
										? 'checkno'
										: 'checks',
								]">
								{{ itemChild.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-flex-wrap at mtow">
<!--					<view class="jiT">-->
				<view class="jiT" :class="item.cityActive==index3?'activeChoose':''" v-for="(itemChild3,index3) in item.child[item.provicenActive].child" @click="chooseProjectCity(itemChild3.id,index,index3)" :key="index3">
												{{itemChild3.name}}
						 <view class="flex at mtTre">
					</view>
				</view>
				<view class="flex at mtow">
					<!-- 冒泡阻止 -->
					<div class="u-flex u-flex-wrap" style="margin: 9px -10px;width: 94vw;" @click.stop="(e)=>{e.preventDefault();}">
						<view class="mustBox" v-for="(item4,index4) in item.child[item.provicenActive].child[item.cityActive].child" :key="index4"  @click.stop="projectCity(item4.id,index,index4)">
<!--							<image :src="item4.image" class="ONe"  mode=""></image>-->
							<view class="mtree" :class="item.countyActive == index4?'activeChoose' : ''">
								{{item4.name}}
							</view>
						</view>
					</div>
					<!-- <view class="flex at mtTre"> -->
				</view>
			</view>
		</view>
		<view style="text-align: center" class="xm" @click="handleJect">
			<view>
				<image
					src="@/static/xm.png"
					style="width: 30px; height: 30px; margin-top: 15px"
					mode=""></image>
			</view>
			成为路径
		</view>
			<shopro-auth-modal v-if="!isLogin&&!ishowfrist"></shopro-auth-modal>
	</view>
	</view>
</template>

<script>
import http from "@/shopro/request";
import qqmap from "@/components/qqmap-wx-jssdk.min.js";
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	data() {
		return {
			active: 0,
			ishowfrist:true,
			lists: [
				{
					area_name: "北京",
				},
				{
					area_name: "北京",
				},
				{
					area_name: "北京",
				},
				{
					area_name: "北京",
				},
				{
					area_name: "北京",
				},
				{
					area_name: "北京",
				},
				{
					area_name: "北京",
				},
				{
					area_name: "山西省",
				},
			],
			cityList: [],
			ides: "",
			cityActive: 0,
			indexparent: 0,
			city: "北京",
			childCityData: [],
		};
	},
	computed: {
		...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin',"userInfo"]),

	},
	onShow() {
		this.ishowfrist = true
		if (
			uni.getStorageSync("cityData") &&
			typeof uni.getStorageSync("cityData") != "string"
		) {
			this.cityList = uni.getStorageSync("cityData");
		} else {
			this.queryCityPath();
			this.getcity();
		}
		if (uni.getStorageSync("cityNames")) {
			this.city = uni.getStorageSync("cityNames");
		} else {
			this.getcity();
		}
	},
	onLoad() {},
	methods: {
		handleJect() {
			this.ishowfrist = false
			console.log(this.userInfo);
			uni.setStorageSync("switch_tijiao","lujing")
			if (this.userInfo.is_vip == 0) {
				uni.navigateTo({
					url: "/pages/index/project_list/qrorder",
				});
			} else {
				uni.navigateTo({
					url:
						"/pages/index/projectProp/index?isvip=" +
						this.userInfo.is_vip +
						"&type=" +
						0,
				});
			}
		},
		backFunction(type) {
			if (type == "1") {
				this.queryCityPath();
				this.getcity();
			}
		},
		//定位
		getcity() {
			let qqmapsdk = new qqmap({
				key: "34GBZ-ZG66D-KV54R-P3DBA-L5F6O-QQFOT",
			});
			uni.getLocation({
				type: "gcj02",
				success: (e) => {
					console.log(e);
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: e.latitude,
							longitude: e.longitude,
						},
						success: (res) => {
							if (uni.getStorageSync("cityNames")) {
								this.city = uni.getStorageSync("cityNames");
							} else {
								this.city = res.result.address_component.city;
							}
						},
					});
				},
			});
		},
		queryCityPath() {
			this.$http("city.index")
				.then((res) => {
					console.log(res);
					res.data.forEach((item, index) => {
						if (
							uni.getStorageSync("active") &&
							index == uni.getStorageSync("active")
						) {
							item.provicenActive =
								uni.getStorageSync("provienceActive");
							item.cityActive = uni.getStorageSync("cityActive");
							item.countyActive = uni.getStorageSync("countyActive");
						} else {
							item.provicenActive = 0;
							item.cityActive = 0;
							item.countyActive = 0;
						}
					});
					this.cityList = res.data;
					this.childCityData = res.data[0].child[0].child;
					this.ides =res.data[0].child[0].child[0].id
					console.log(res.data[0].child[0].child[0].id,this.ides,9999999999)
				})
				.catch((err) => {
					console.log("err", err);
				});
		},
		check(index, parentIndex) {
			this.cityList[parentIndex].provicenActive = index;
			console.log(this.cityList, "====数据");
			this.cityList[parentIndex].cityActive = 0;
			this.cityList[index].countyActive = 0
		},
		mapListClick() {
			uni.navigateTo({
				url: "/pages/index/city_path/select_city/select_city_lujing",
			});
		},
		chooseProjectCity(id, index, index1, name) {
			this.cityList[index].cityActive = index1;
			uni.setStorageSync("cityNames", name);
			this.cityList[index].countyActive = 0
		},
		projectCity(id,index,index2){
			console.log("===id",id)
			this.cityList[index].countyActive = index2
			uni.setStorageSync("cityData",this.cityList)
			uni.setStorageSync("cityDataIndex",index)
			uni.setStorageSync("countyId", id);
			uni.navigateTo({
				url:`/pages/index/city_path/project_city?id=${id}`,
			})
		}
	},
};
</script>

<style lang="scss">
// 标题栏
.nav-wrap {
	width: 100%;
	padding: 0 30rpx;
	text-align: center;
}
.nav-item {
	width: 100%;
	font-size: 32rpx;
	font-weight: bold;
}
page {
	background: #f7f7f7;
}

.diTop {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	margin-top: 12rpx;
	padding: 34rpx 30rpx 0;
}

.chect {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #0cc08e;
	line-height: 33rpx;
	text-align: center;
}

.foText {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
	text-align: left;
	font-style: normal;
	margin-left: 6rpx;
}

.dwP {
	width: 28rpx;
	height: 28rpx;
	margin-top: 5rpx;
}

.qhP {
	width: 28rpx;
	height: 28rpx;
	margin-right: 8rpx;
	margin-top: 5rpx;
}
.tick {
	margin-top: 12rpx;
}
.bgs {
	padding: 45rpx 30rpx 0;
	background-color: #fff;
	.titles {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #14151a;
		line-height: 45rpx;
		text-align: left;
		font-style: normal;
		margin: 0 0 10rpx 0;
	}

	.mtOne {
		width: 100%;
		display: flex;
		flex-flow: row wrap;

		.por {
			width: 158rpx;
			height: 110rpx;
			background: #000000;
			border-radius: 4rpx;
			position: relative;
			margin: 20rpx 8rpx 0;

			.good {
				width: 158rpx;
				height: 110rpx;
			}

			.checkno,
			.checks {
				position: absolute;
				bottom: 16rpx;
				left: 37rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
			}

			.checkno {
				//切换后样式
				color: #0cc08e;
			}
		}
	}

	.mtow {
		width: 100%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
		align-items: center;
		margin-top: 18rpx;
		.jiT {
			width: 20%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333;
		}
		.activeChoose {
			color: #0cc08e;
		}
	}
	.mtTre {
		width: 100%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
	}
	.mustBox {
		min-width: calc((100% - 1rpx) / 5);
		max-width: calc((100% - 1rpx) / 5);
		margin-bottom: 30rpx;
		.activeChoose {
			color: #0cc08e;
		}
	}
	.ONe {
		width: 58rpx;
		height: 58rpx;
		position: relative;
		left: 50%;
		top: 36%;
		transform: translate(-50%, -14%);
	}
	.mtree {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #14151a;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
	}
	.mtTre3 {
		.mustBox {
			min-width: calc((100% - 1rpx) / 3);
			max-width: calc((100% - 1rpx) / 3);
			margin-bottom: 30rpx;
		}
	}
}

.xm {
	width: 70px;
	height: 70px;
	background: linear-gradient(180deg, #f7bb42 0%, #ed861f 100%);
	box-shadow: 0px 0px 8px 0px rgba(131, 86, 37, 0.2);
	position: fixed;
	bottom: 80px;
	right: 10px;
	font-size: 12px;
	color: #fff;
	z-index: 1;
	border-radius: 50%;
}

.xm image {
	width: 20px !important;
	height: 20px !important;
}

</style>
